import Link from "next/link";
import { Button } from "../components/ui/button";
import { FileText, Zap, Smartphone, Code } from "lucide-react";

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
      <div className="container mx-auto px-4 py-16">
        {/* Header */}
        <div className="text-center mb-16">
          <h1 className="text-5xl font-bold text-gray-900 dark:text-white mb-6">
            现代化文档网站
          </h1>
          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
            基于 Next.js 15 和 shadcn/ui 构建的美观、响应式文档系统，支持 Markdown 和 MDX 格式
          </p>
          <div className="flex gap-4 justify-center">
            <Link href="/docs/getting-started">
              <Button size="lg" className="text-lg px-8">
                开始使用
              </Button>
            </Link>
            <Link href="/docs/hello">
              <Button variant="outline" size="lg" className="text-lg px-8">
                查看示例
              </Button>
            </Link>
          </div>
        </div>

        {/* Features */}
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
            <FileText className="h-12 w-12 text-blue-600 mb-4" />
            <h3 className="text-xl font-semibold mb-2">MDX 支持</h3>
            <p className="text-gray-600 dark:text-gray-300">
              完全支持 Markdown 和 MDX 格式，可以在文档中嵌入 React 组件
            </p>
          </div>
          
          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
            <Zap className="h-12 w-12 text-yellow-600 mb-4" />
            <h3 className="text-xl font-semibold mb-2">快速构建</h3>
            <p className="text-gray-600 dark:text-gray-300">
              基于 Next.js 15，提供极快的构建速度和优秀的开发体验
            </p>
          </div>
          
          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
            <Smartphone className="h-12 w-12 text-green-600 mb-4" />
            <h3 className="text-xl font-semibold mb-2">响应式设计</h3>
            <p className="text-gray-600 dark:text-gray-300">
              完美适配桌面端和移动端，提供一致的用户体验
            </p>
          </div>
          
          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
            <Code className="h-12 w-12 text-purple-600 mb-4" />
            <h3 className="text-xl font-semibold mb-2">代码高亮</h3>
            <p className="text-gray-600 dark:text-gray-300">
              内置代码语法高亮，支持多种编程语言
            </p>
          </div>
        </div>

        {/* Quick Links */}
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8">
          <h2 className="text-2xl font-bold mb-6 text-center">快速导航</h2>
          <div className="grid md:grid-cols-3 gap-6">
            <Link href="/docs/getting-started" className="block p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
              <h3 className="font-semibold text-lg mb-2">快速开始</h3>
              <p className="text-gray-600 dark:text-gray-300">学习如何快速开始使用文档系统</p>
            </Link>
            
            <Link href="/docs/api-reference" className="block p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
              <h3 className="font-semibold text-lg mb-2">API 参考</h3>
              <p className="text-gray-600 dark:text-gray-300">查看完整的 API 参考文档</p>
            </Link>
            
            <Link href="/docs/hello" className="block p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
              <h3 className="font-semibold text-lg mb-2">Hello World</h3>
              <p className="text-gray-600 dark:text-gray-300">查看第一个示例文档</p>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}
